<template>
	<view class="bianjiyaop">
		<headertop title="添加药品" str1="oridei" :back1="back1"></headertop>
		<view class="bianjiyaopback">
		</view>
		<view class="" :style="{'margin-top':statusBarHeight+'px','width':'100%','height':barHeight+'px'}">
		</view>
		<view class="centercontent">
			<view class="msgtext">
				<image :src="_static('/images/Frame@2x(32).png')" class="gantanhao" mode=""></image>
				<span>请遵医嘱选择用药剂量、频率、时间</span>
			</view>
			<view class="mouldff">
				<view class="line">
					<view style="display: flex;align-items: center;">
						<span style="color: #F53F3F;">*</span>
						<span>药品名称：</span>
					</view>
					<input type="text" placeholder="请输入药品名称" v-model="formData['name']" />
				</view>
				<view class="line" @click="open('药品单位')">
					<view style="display: flex;align-items: center;">
						<span style="color: #F53F3F;">*</span>
						<span>药品单位：</span>
					</view>
					<view style="display: flex;align-items: center;">
						<span style="color:#86909C;">{{formData['unit']?formData['unit']:'请选择'}}</span>
						<image :src="_static('/images/Frjt.png')" class="arrowright" mode="" style="width: 24rpx;
					height: 24rpx; margin-left:8rpx ;">
						</image>
					</view>
				</view>
				<view class="line" style="border: none;" @click="open('使用方式')">
					<view style="display: flex;align-items: center;">
						<span style="color: #F53F3F;">*</span>
						<span>使用方式：</span>
					</view>
					<view style="display: flex;align-items: center;">
						<span style="color:#86909C;">{{formData.usage?text(fsarr,formData['usage']) :'请选择'}}</span>
						<image :src="_static('/images/Frjt.png')" class="arrowright" mode="" style="margin-left:8rpx ;width: 24rpx;
height: 24rpx;">
						</image>
					</view>
				</view>
			</view>
		</view>
		<view class="fixed">
			<view class="center">
				<view class="savebtn" @click="save1">
					保存
				</view>
			</view>
		</view>
		<view class="xzx">
			<up-popup :show="show" mode="bottom">
				<view class="back">
					<view class="xuanxiang">
						<view class="tt" style="margin-left: 30rpx;color: #888;" @click="show=false">
							取消
						</view>
						<view class="tt" style="font-weight: 600;">
							{{titlepopu}}
						</view>
						<view class="tt" style="margin-right: 30rpx;color: #0077BE;" @click="queding">
							确认
						</view>
					</view>
					<picker-view :indicator-style="indicatorStyle" @change="bindChange" immediate-change="true"
						class="picker-view" v-show="titlepopu=='请选择药品单位'">
						<picker-view-column>
							<view class="item" v-for="(item,index) in danweiarr" :key="index">
								{{item}}
							</view>
						</picker-view-column>
					</picker-view>

					<picker-view :indicator-style="indicatorStyle" @change="bindChange" immediate-change="true"
						class="picker-view" v-show="titlepopu=='请选择使用方式'">
						<picker-view-column>
							<view class="item" v-for="(item,index) in fsarr" :key="index">
								{{item['titla']}}
							</view>
						</picker-view-column>
					</picker-view>
				</view>
			</up-popup>
		</view>
	</view>
</template>

<script setup>
	import headertop from '@/components/header.vue'
	import {
		_static
	} from '@/ulm/utils/url.js'
	import ulm, {
		$api
	} from '@/ulm';
	import {
		ref,
		reactive,
		onMounted
	} from 'vue'
	import {
		onPageScroll,
		onLoad,
		onShow,
		onReachBottom
	} from "@dcloudio/uni-app";
	const statusBarHeight = ref('')
	const titlepopu = ref('')
	const show = ref(false)
	const danweiarr = ref(['颗', '粒', '片', '包', '袋', 'ml', 'mg', '滴', '支', '瓶', '吸'])
	const fsarr = ref([{
		titla: '口服',
		id: 1
	}, {
		titla: '注射',
		id: 2
	}, {
		titla: '吸入',
		id: 3
	}, {
		titla: '外用',
		id: 4
	}])
	const barHeight = ref('')
	const indicatorStyle = ref(`height: 40px`)
	const formData = reactive({
		name: '',
		unit: '',
		usage: ''
	})
	const unit = ref('')
	const usage = ref('')
	const back1 = ref('')
	const active = ref(2)
	onMounted(() => {
		statusBarHeight.value = uni.getSystemInfoSync().statusBarHeight
		const {
			top,
			height
		} = wx.getMenuButtonBoundingClientRect();
		barHeight.value = height ? height + (top - statusBarHeight.value) * 2 : 38;
	})
	onPageScroll((e) => {
		if (e.scrollTop > 100) {
			back1.value = '#81D6FF'
		} else {
			back1.value = ''
		}
	})

	function bindChange(e) {
		const val = e.detail.value
		if (titlepopu.value == '请选择药品单位') {
			unit.value = danweiarr.value[val[0]]
		} else if (titlepopu.value == '请选择使用方式') {
			usage.value = fsarr.value[val[0]]['titla']
		}
	}

	function queding() {
		if (titlepopu.value == '请选择药品单位') {
			if (!unit.value) {
				formData['unit'] = danweiarr.value[0]
			} else {
				formData['unit'] = unit.value
			}
		} else if (titlepopu.value == '请选择使用方式') {
			if (!usage.value) {
				formData['usage'] = 1
			} else {
				var ind = fsarr.value.findIndex(item => item.titla == usage.value)
				formData['usage'] = fsarr.value[ind]['id']
			}
		}
		show.value = false
	}

	function text(arr, ind) {
		var indd = arr.findIndex(item => item.id == ind)
		if (indd != -1) {
			return arr[indd]['titla']
		}
	}

	function gopage() {
		uni.navigateTo({
			url: '/sub_index/index/tjyp1'
		})
	}

	function save1() {
		for (var i in formData) {
			if (!formData[i]) {
				uni.showToast({
					title: '必填项不能为空',
					icon: 'none'
				})
				return
			}
		}
		uni.showModal({
			title: '提示', // 标题（可选）
			content: '确认要添加药品吗？', // 内容（可选）
			confirmText: '确定', // 确认按钮文字（可选，默认“确定”）
			success: (res) => {
				if (res.confirm) {
					save()
					// 执行确定后的逻辑
				}
			},
			fail: (err) => {}
		});
	}
	async function save() {
		const res = await $api.addMedicine(formData)
		if (res.code == 1) {
			uni.navigateBack()
			setTimeout(() => {
				uni.showToast({
					title: '添加成功',
					icon: 'none'
				})
			}, 500)
		} else {
			uni.showToast({
				title: res.msg,
				icon: 'none'
			})
		}
	}

	function open(str) {
		titlepopu.value = '请选择' + str
		console.log(titlepopu.value, 'titlepopu.valuetitlepopu.valuetitlepopu.value');
		show.value = true
	}
</script>

<style lang="scss">
	.xuanxiang {
		width: 100%;
		display: flex;
		align-items: center;
		margin-top: 30rpx;
		overflow: hidden;
		justify-content: space-between;
		margin-bottom: 30rpx;

		.tt {
			font-size: 32rpx;
		}
	}
	.item {
		line-height: 100rpx;
		text-align: center;
	}

	.picker-view {
		width: 100%;
		height: 600rpx;
		margin-top: 20rpx;
		background: #FFFFFF;
		border-radius: 20rpx 20rpx 0 0;
	}

	.fixed {
		width: 100%;
		height: 248rpx;
		background: #FFFFFF;
		box-shadow: 0rpx -6rpx 14rpx 0rpx rgba(0, 0, 0, 0.03);
		border-radius: 0rpx 0rpx 0rpx 0rpx;
		overflow: hidden;
		position: fixed;
		bottom: 0%;

		.center {
			width: 686rpx;
			margin: auto;
			margin-top: 28rpx;
			overflow: hidden;

			.savebtn {
				width: 686rpx;
				height: 82rpx;
				background: #2AB4F5;
				border-radius: 12rpx 12rpx 12rpx 12rpx;
				text-align: center;
				line-height: 82rpx;
				font-family: PingFang SC, PingFang SC;
				font-weight: 500;
				font-size: 32rpx;
				color: #FFFFFF;
				margin-top: 24rpx;
			}

			.xk {
				font-family: PingFang SC, PingFang SC;
				font-weight: 400;
				font-size: 24rpx;
				color: #86909C;
				display: flex;
				align-items: center;

				image {
					width: 32rpx;
					height: 32rpx;
					margin-right: 16rpx;
				}
			}
		}
	}

	page {
		background: #F7F8FA;
	}

	.bianjiyaop {
		width: 100%;
		overflow: hidden;
		position: relative;

		.bianjiyaopback {
			width: 100%;
			height: 450rpx;
			background: linear-gradient(180deg, #CAEEFF 71%, rgba(240, 250, 255, 0) 100%);
			border-radius: 0rpx 0rpx 0rpx 0rpx;
			position: absolute;
			z-index: -1;
		}

		.mouldff {
			width: 686rpx;
			background: #FFFFFF;
			box-shadow: 0rpx 4rpx 10rpx 0rpx rgba(0, 0, 0, 0.03);
			border-radius: 24rpx 24rpx 24rpx 24rpx;
			overflow: hidden;
			margin-top: 20rpx;
			padding: 8rpx 0;

			.line {
				width: 630rpx;
				height: 88rpx;
				display: flex;
				align-items: center;
				justify-content: space-between;
				font-family: PingFang SC, PingFang SC;
				font-weight: 400;
				font-size: 28rpx;
				margin: auto;
				color: #1D2129;
				border-bottom: 2rpx solid #F2F3F5;

				image {
					width: 36rpx;
					height: 36rpx;
				}

				input {
					text-align: right;
				}
			}
		}

		.centercontent {
			width: 686rpx;
			overflow: hidden;
			margin: auto;
			margin-top: 32rpx;

			.mouldff {
				width: 686rpx;
				background: #FFFFFF;
				box-shadow: 0rpx 4rpx 10rpx 0rpx rgba(0, 0, 0, 0.03);
				border-radius: 24rpx 24rpx 24rpx 24rpx;
				overflow: hidden;
				margin-top: 20rpx;
				padding: 8rpx 0;

				.line {
					width: 630rpx;
					height: 88rpx;
					display: flex;
					align-items: center;
					justify-content: space-between;
					font-family: PingFang SC, PingFang SC;
					font-weight: 400;
					font-size: 28rpx;
					margin: auto;
					color: #1D2129;
					border-bottom: 2rpx solid #F2F3F5;
				}
			}

			.msgtext {
				width: 100%;
				display: flex;
				align-items: center;
				font-family: PingFang SC, PingFang SC;
				font-weight: 400;
				font-size: 24rpx;
				color: #0174AA;

				.gantanhao {
					width: 28rpx;
					height: 28rpx;
					margin-right: 12rpx;
				}
			}
		}
	}
</style>